<template>
  <el-card>
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-select v-model="form.parentId">
          <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称" prop="name">
        <el-input v-model="form.name" :disabled="!!id"></el-input>
      </el-form-item>
      <el-form-item label="前端图表">
        <el-input v-model="form.icon" :disabled="!!id"></el-input>
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio v-model="form.hidden" :label="0">是</el-radio>
        <el-radio v-model="form.hidden" :label="1">否</el-radio>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {
  getMenuInfo,
  getMenuLists,
  updateMenuInfo,
  createMenuInfo,
} from "@/request/api";
export default {
  data() {
    return {
      id: undefined,
      form: {
        hidden: 0,
      },
      menuList: [],
      rules: {
        title: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "前端名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submit() {
      if (this.id) {
        updateMenuInfo(this.id, this.form).then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
            this.$message.success(res.message);
          }
        });
      } else {
        createMenuInfo(this.form).then((res) => {
          if (res.code == 200) {
            this.$router.go(-1);
            this.$message.success(res.message);
          }
        });
      }
    },
    fetchData() {
      getMenuInfo(this.id).then((res) => {
        if (res.code === 200) {
          this.form = res.data;
        }
      });
    },
  },
  created() {
    this.id = this.$route.query && this.$route.query.id;
    if (this.id) {
      this.fetchData();
    }
    getMenuLists(0, { pageSize: 100, pageNum: 1 }).then((res) => {
      if (res.code === 200) {
        this.menuList = [{ id: 0, title: "无上级菜单" }, ...res.data.list];
      }
    });
  },
};
</script>

<style>
</style>